<template>
  <div class="dashboard-container">
    <!-- 左侧导航栏 (30%) -->
    <aside class="sidebar">
      <div class="logo-section">
        <h1>研工办监考系统</h1>
      </div>

      <nav class="menu">
        <!-- 报名审批子菜单 -->
        <div class="submenu-group">
          <div class="submenu-title">报名审批</div>
          <div class="submenu-items">
            <router-link
                to="/dashboard2/approval/pending"
                class="menu-item"
                active-class="active"
            >
              <span class="menu-icon">⏳</span>
              <span>报名等待结果</span>
            </router-link>
            <router-link
                to="/dashboard2/approval/success"
                class="menu-item"
                active-class="active"
            >
              <span class="menu-icon">✅</span>
              <span>报名成功</span>
            </router-link>
            <router-link
                to="/dashboard2/approval/failed"
                class="menu-item"
                active-class="active"
            >
              <span class="menu-icon">❌</span>
              <span>报名失败</span>
            </router-link>
          </div>
        </div>

        <router-link
            to="/dashboard2/approved-list"
            class="menu-item"
            active-class="active"
        >
          <span class="menu-icon">📋</span>
          <span>同意报名名单</span>
        </router-link>

        <router-link
            to="/dashboard2/rejected-list"
            class="menu-item"
            active-class="active"
        >
          <span class="menu-icon">📝</span>
          <span>驳回名单</span>
        </router-link>

        <router-link
            to="/dashboard2/exam-list"
            class="menu-item"
            active-class="active"
        >
          <span class="menu-icon">👨‍🏫</span>
          <span>监考名单</span>
        </router-link>

        <router-link
            to="/dashboard2/messages"
            class="menu-item"
            active-class="active"
        >
          <span class="menu-icon">✉️</span>
          <span>消息中心</span>
        </router-link>
      </nav>

      <div class="sidebar-footer">
        <p>四川大学锦江学院</p>
        <p>研究生招生办公室</p>
      </div>
    </aside>

    <!-- 右侧主体 (70%) -->
    <main class="main-content">
      <!-- 顶部导航栏 -->
      <header class="top-bar">
        <div class="title-section">
          <h2>{{ currentRouteTitle }}</h2>
        </div>

        <div class="user-section">
          <div class="user-info">
            <div class="avatar-placeholder">
              <span>{{ userInitials }}</span>
            </div>
            <div class="user-details">
              <p class="username">{{ userName }}</p>
              <p class="role">{{ userRole }}</p>
            </div>
          </div>

          <div class="user-actions">
            <button class="action-btn" @click="switchAccount">
              <span>切换账号</span>
            </button>
            <button class="action-btn" @click="logout">
              <span>退出登录</span>
            </button>
          </div>
        </div>
      </header>

      <!-- 内容区域 -->
      <div class="content-area">
        <router-view />
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

// 当前路由标题（动态显示）
const currentRouteTitle = computed(() => {
  return route.meta.title || '控制台';
});

// 从本地存储获取用户信息
const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
const userName = userInfo.username || '张主任';
const userRole = '研工办主任';
const userInitials = computed(() => {
  if (userName && userName.length >= 2) {
    return userName.substring(0, 1);
  }
  return '主';
});

// 切换账号
const switchAccount = () => {
  localStorage.removeItem('userInfo');
  router.push('/login');
};

// 退出登录
const logout = () => {
  localStorage.removeItem('userInfo');
  router.push('/login');
};
</script>

<style scoped>
.dashboard-container {
  display: flex;
  min-height: 100vh;
  background-color: #f8fafc;
}

/* 左侧导航栏样式 (30%) */
.sidebar {
  flex: 0 0 30%;
  max-width: 280px;
  background: linear-gradient(135deg, #1a2b4b, #2c5282);
  color: white;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.logo-section {
  padding: 25px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-section h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.menu {
  padding: 20px 0;
  flex-grow: 1;
}

.submenu-group {
  margin-bottom: 10px;
}

.submenu-title {
  padding: 10px 25px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.submenu-items {
  padding-left: 20px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 25px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.3s;
  font-size: 14px;
}

.menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.menu-item.active {
  background-color: rgba(255, 255, 255, 0.15);
  color: white;
  border-left: 4px solid #ffd700;
}

.menu-icon {
  margin-right: 12px;
  font-size: 16px;
}

.sidebar-footer {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  opacity: 0.8;
}

/* 右侧主体样式 (70%) */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  height: 70px;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  z-index: 5;
}

.title-section h2 {
  margin: 0;
  font-size: 18px;
  color: #1a2b4b;
  font-weight: 600;
}

.user-section {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1a3a6c;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 12px;
}

.user-details p {
  margin: 0;
  line-height: 1.4;
}

.username {
  font-weight: 500;
  color: #1a2b4b;
}

.role {
  font-size: 13px;
  color: #666;
}

.user-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  padding: 8px 15px;
  background-color: #f0f2f5;
  border: none;
  border-radius: 4px;
  color: #1a2b4b;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.action-btn:hover {
  background-color: #e2e8f0;
}

.content-area {
  flex: 1;
  padding: 25px 30px;
  overflow-y: auto;
  background-color: #f8fafc;
}
</style>
